<template>
    <div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in swiperimg" :key="index">
            <img :src="item" alt="">
          </div>
        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="act-cont">
        <div class="act2-hed">
          <p>
            <span>{{title2}}</span>
            <span>{{apply}}</span>
          </p>
          <p>
            <span>点赞</span>
            <span>{{like2}}</span>
            <span>投票</span>
            <span>{{vote2}}</span>
          </p>
          <p>{{hold_start_time}}-{{hold_end_time}}</p>
        </div>
        <div class="act2-tit">
          <div class="isauth">
            <img :src="avatar" alt="">
            <img v-if="isauth==0?false:true" :src="'./static/lyl/approve.png'" alt="">
          </div>
          <div class="tit-center">
            <p>
              <span>{{active_organizer}}</span>
              <!--<span>+关注</span>-->
            </p>
            <p>{{signature}}</p>
          </div>
          <img :src="'./static/lyl/youjian.png'" alt="">
        </div>
        <div class="act2-duce">
          <div class="introduce">活动介绍</div>
          <!--取消 后台添加-->
          <!--<div class="act2-center">-->
            <!--<img src="/static/lyl/tou.png" alt="">-->
            <!--&lt;!&ndash;<p>关于大集</p>&ndash;&gt;-->
            <!--<p>大集镇一凝聚产生力量 团结产生希望</p>-->
          <!--</div>-->
          <div class="pf" v-html="html"></div>
          <div class="introduce">联系我们</div>
          <div class="contact">
            <p>联系人：{{contact}}</p>
            <p>电&nbsp&nbsp&nbsp话：{{mobile}}</p>
            <p>地&nbsp&nbsp&nbsp址：{{active_address}}</p>
            <div class="duce-fot">
              <img :src="qr_code" alt="">
              <p>扫一扫加入官方微信群</p>
            </div>
          </div>
          <div class="act2-photo">
            <p>
              <span>活动相册</span>
              <span @click="photoR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="photoul">
              <li @click="scaleph(item,index)" v-for="(item,index) in photoData" :key="index">
                <img :src="item" alt="">
              </li>
            </ul>
          </div>
          <div class="act2-photo">
            <p>
              <span>活动视频</span>
              <span @click="videoR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="ulfour">
              <li v-for="(item,index) in videoData" :key="index">
                <div class="img">
                  <img :src="item.thumb" alt="">
                  <img @click="playVideo(item)" :src="'./static/lyl/video.png'" alt="">
                </div>
                <p>{{item.video_title}}</p>
              </li>
            </ul>
          </div>
          <div class="act2-active">
            <p>
              <span>活动动态</span>
              <span @click="activeR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul>
              <li v-for="(item,index) in activeData" :key="index">
                <img :src="item.avatar" alt="">
                <div class="act2-right">
                  <p>{{item.user_login}}</p>
                  <p>{{item.content}}</p>
                  <p>
                    <span>{{item.create_time | simplyToRelativeTime}}</span>
                    <img @click="like3(item)" :src="item.status==1?'./static/lyl/like.png':'./static/lyl/like2.png'" alt="">
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div class="act2-vote">
            <p>
              <span>活动投票</span>
              <span @click="voteR()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <div class="act2-autor">参赛者</div>
            <ul class="voteul">
              <li v-for="(item,index) in pantData" :key="index">
                <img :src="item.avatar" alt="">
                <p>{{item.vote}}</p>
              </li>
            </ul>
            <div class="act2-autor">节目</div>
            <ul class="autor-ul">
              <li v-for="(item,index) in pantData2" :key="index">
                <img :src="item.img" alt="">
                <p>{{item.name}}{{item.vote}}</p>
              </li>
            </ul>
          </div>

          <div class="act2-photo tuijian">
            <p>
              <span>推荐视频</span>
              <span @click="videoR2()">查看更多 <img :src="'./static/lyl/youjian.png'" alt=""></span>
            </p>
            <ul class="ulfour">
              <li v-for="(item,index) in tuijiaData" :key="index">
                <div class="img">
                  <img :src="item.thumb" alt="">
                  <img @click="playVideo(item)" :src="'./static/lyl/video.png'" alt="">
                </div>
                <p>{{item.video_title}}</p>
              </li>
            </ul>
          </div>

        </div>
      </div>
      <div class="acti-footer">
        <span @click="isbare2()">分享</span>
        <span @click="voteR()">投票</span>
        <span @click="applyR()">报名</span>
      </div>

      <van-popup v-model="bolls" position="bottom">
        <div @click="fenx()" class="fotsss" v-for="(item,index) in imgData" :key="index">
          <img :src="item" alt="">
          <p>分享到微信</p>
        </div>
      </van-popup>
    </div>
</template>

<script>
  import Swiper from 'swiper'
  import * as list from "../../../api/list.js";
  // import wx from 'weixin-js-sdk'
  // import axios from 'axios'
  import soshm from 'soshm'

    export default {
      name: "Active2",
      data(){
        return{
          bolls:false,
          imgData:['./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg'],
          swiperimg:[],
          vote2:'',
          like2:'',
          title2:'',
          hold_start_time:'',
          hold_end_time:'',
          active_organizer:'',
          active_address:'',
          html:null,
          mobile:'',
          avatar:'',
          signature:'',
          apply:'',
          qr_code:'',
          contact:'',
          photoData:[],
          videoData:[],
          activeData:[],
          pantData:[],
          pantData2:[],
          tuijiaData:[],
          isauth:''
        }
      },
      beforeMount(){
        let isauth = {user_id:this.$store.state.user_id};
        list.isAuth(isauth).then(res=>{
          this.isauth = res.data.is_auth;
        });

        let parmes2 = {id:this.$route.params.id2};
        list.activeDetail(parmes2).then(res=>{
          //console.log(res);
          this.vote2 = res.data.vote;
          this.like2 = res.data.like;
          this.title2 = res.data.title;
          this.hold_start_time = res.data.hold_start_time;
          this.hold_end_time = res.data.hold_end_time;
          this.active_organizer = res.data.active_organizer;
          this.active_address = res.data.active_address;
          this.html = res.data.content;
          this.mobile = res.data.mobile;
          this.avatar = res.data.avatar;
          this.signature = res.data.signature;
          this.apply = res.data.apply;
          this.qr_code = res.data.qr_code;
          this.contact = res.data.contact;
          this.swiperimg = res.data.main_pic;
          this.$nextTick(() => {  // 下一个UI帧再初始化swiper
            var swiper = new Swiper('.swiper-container', {
              autoplay:true,
              loop : true,
              pagination: {
                el: '.swiper-pagination',
              },
            });
          })
        });

        let parmes3 = {id:this.$route.params.id2,type:1};
        list.activePhoto(parmes3).then(res=>{
          console.log(res);
          this.photoData = res.data
        });

        list.activeVideo(parmes3).then(res=>{
          //console.log(res.data);
          this.videoData = res.data
        });
        //活动动态
        let parmes7 = {
          id:this.$route.params.id2,
          type:1,
          user_id:this.$store.state.user_id
        };
        list.activeDynamic(parmes7).then(res=>{
          console.log(res.data);
          this.activeData = res.data;
        });

        //人气排行
        let parmes4 = {active_id:this.$route.params.id2,type:2,num:4};
        list.voteRank(parmes4).then(res=>{
          //console.log('人气',res.data);
          this.pantData = res.data;
        });
        //节目排行
        let parmes5 = {active_id:this.$route.params.id2,type:1,num:4};
        list.voteRank(parmes5).then(res=>{
          //console.log('节目',res.data);
          this.pantData2 = res.data;
        });


        //推荐视频
        let parmes6 = {active_id:this.$route.params.id2,num:4};
        list.recommendedVideo(parmes6).then(res=>{
          //console.log(res);
          this.tuijiaData = res.data;
        })
      },
      mounted(){
        //alert(location.href.split('#')[0]);
        // let url = encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl);
        //let url = {url:location.href.split('#')[0]};
        //alert(url);
        // console.log(wx);
        // axios.get('http://dajiwuhui.kaifazhe.site/Api/Share/getSignPackage',{params:{url:location.href.split('#')[0]}}).then(res=>{
        //   var getMsg = res.data.data;
        //   // console.log("url",url)
        //   console.log("返回值",res);
        //   wx.config({
        //     debug: false, //生产环境需要关闭debug模式
        //     appId: getMsg.appId, //appId通过微信服务号后台查看
        //     timestamp: getMsg.timestamp, //生成签名的时间戳
        //     nonceStr: getMsg.nonceStr, //生成签名的随机字符串
        //     signature: getMsg.signature, //签名
        //     jsApiList: [ //需要调用的JS接口列表
        //       'onMenuShareTimeline', //分享给好友
        //       'onMenuShareAppMessage', //分享到朋友圈
        //       'showMenuItems',
        //       'hideMenuItems'
        //     ]
        //   });
        // });

        // console.log(wx);
        // axios.get('http://dajiwuhui.kaifazhe.site/Api/Share/getSignPackage',{params:{url:location.href.split('#')[0]}}).then(res=>{
        //   var getMsg = res.data.data;
        //   // console.log("url",url)
        //   console.log("返回值",res);
        //   wx.config({
        //     debug: false, //生产环境需要关闭debug模式
        //     appId: getMsg.appId, //appId通过微信服务号后台查看
        //     timestamp: getMsg.timestamp, //生成签名的时间戳
        //     nonceStr: getMsg.nonceStr, //生成签名的随机字符串
        //     signature: getMsg.signature, //签名
        //     jsApiList: [ //需要调用的JS接口列表
        //       'updateAppMessageShareData', //分享给好友
        //       'updateTimelineShareData', //分享到朋友圈
        //     ]
        //   });
        // });

        mui.back = function() {
          window.history.go(-1);
        }
      },
      filters:{
        simplyToRelativeTime(timestamp) {
          let currentUnixTime = Math.round((new Date()).getTime() / 1000);       // 当前时间的秒数
          let deltaSecond = currentUnixTime - parseInt(timestamp, 10);            // 当前时间与要转换的时间差（ s ）
          let result;

          if (deltaSecond < 60) {
            result = deltaSecond + '秒前';
          } else if (deltaSecond < 3600) {
            result = Math.floor(deltaSecond / 60) + '分钟前';
          } else if (deltaSecond < 86400) {
            result = Math.floor(deltaSecond / 3600) + '小时前';
          } else {
            result = Math.floor(deltaSecond / 86400) + '天前';
          }
          return result;
        }
      },
      methods:{
        photoR(){
          this.$router.push('/photo/1/'+this.$route.params.id2);
        },
        scaleph(it2,i){
          this.$router.push('/photo2/'+(i+1)+'/'+this.photoData.length);
          this.$store.commit('chuan',it2);
        },
        videoR(){
          this.$router.push('/video/2/'+this.$route.params.id2);
        },
        videoR2(){
          this.$router.push('/recommend/5/'+this.$route.params.id2);
        },
        playVideo(item){
          this.$router.push('/video2/'+item.id+'/'+this.$route.params.id2)
        },
        activeR(){
          this.$router.push('/dynamic/3/'+this.$route.params.id2);
        },
        voteR(){
          this.$router.push('/vote/4/showout/0/'+this.$route.params.id2);
        },
        applyR(){
          if (this.$store.state.user_id.length==0){
            this.$router.push('/register')
          } else{
            this.$router.push('/apply/'+this.$route.params.id2);
          }
        },
        like3(itl){
          if (itl.status==1){
            itl.status=0;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            list.activeDynamicLike(parms).then(res=>{
              console.log(res);
            })
          } else{
            itl.status=1;
            let parms = {
              id:itl.id,
              user_id:this.$store.state.user_id,
              status:itl.status
            };
            list.activeDynamicLike(parms).then(res=>{
              console.log(res);
            })
          }
        },
        isbare2(){
          this.bolls = !this.bolls;
        },
        fenx(){
          //var url = location.href.split('#')[0];
          //alert(location.href.split('#')[0]);
          // let url = encodeURIComponent(this.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl);
          //let url = {url:location.href.split('#')[0]};
          //alert(url);


          // let fenurl = location.href.split('#')[0];
          // wx.ready(function () {
          //   wx.updateAppMessageShareData({ // 分享给朋友  ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用
          //     title: '我是大集舞会', // 分享标题
          //     desc: 'This is a test!', // 分享描述
          //     link: fenurl, // 分享链接
          //     imgUrl: 'http://dajiwuhui.kaifazhe.site/public/20190114202521.png', // 分享图标
          //     type: '', // 分享类型,music、video或link，不填默认为link
          //     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
          //     success: function() {
          //        console.log('分享成功')
          //     },
          //     cancel: function() {
          //       console.log('分享失败')
          //     }
          //   });
          //});

          // wx.error(function(res){
          //   console.log(res);
          //   // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          // });

          soshm('#soshid', {
            // 分享的链接，默认使用location.href
            url: 'http://www.36kr.com',
            // 分享的标题，默认使用document.title
            title: '36氪',
            // 分享的摘要，默认使用<meta name="description" content="">content的值
            digest: '关注互联网创业',
            // 分享的图片，默认获取本页面第一个img元素的src
            pic: 'http://www.36kr.com/assets/images/apple-touch-icon.png',
            // 选择要显示的分享站点，顺序同sites数组顺序，
            // 支持设置的站点有weixin,yixin,weibo,qzone,tqq,douban,renren,tieba
            sites: ['weixin', 'weibo', 'yixin', 'qzone']
          })
        }
      }
    }
</script>

<style scoped>

 .act-cont .act2-hed{
   padding: 30px 40px;
   border-bottom: 2px solid #dcdcdc;
 }
  .act-cont .act2-hed p:nth-child(1){
    display: flex;
    justify-content: space-between;
  }
 .act-cont .act2-hed p:nth-child(1) span:nth-child(1){
   font-size: 32px;
   font-weight: bold;
 }
 .act-cont .act2-hed p:nth-child(1) span:nth-child(2){
   width: 100px;
   height: 40px;
   border-radius: 5px;
   font-size: 24px;
   color: #fff;
   background: #e98345;
   text-align: center;
   line-height: 40px;
 }
 .act-cont .act2-hed p:nth-child(2){
   font-size: 26px;
   color: #8c8c8c;
   margin: 30px 0;
 }
 .act-cont .act2-hed p:nth-child(2) span{
   margin-right: 40px;
 }
 .act-cont .act2-hed p:nth-child(3){
   font-size: 24px;
   color: #8c8c8c;
   padding-left: 60px;
 }
 .act-cont .act2-tit{
   border: 1px solid #cdcdcd;
   margin: 60px 40px 0;
   padding: 28px 20px;
   display: flex;
   justify-content: space-between;
 }
 .act-cont .act2-tit .isauth{
   position: relative;
 }
 .act-cont .act2-tit .isauth img:nth-child(1){
   width: 130px;
   height: 130px;
 }
 .act-cont .act2-tit .isauth img:nth-child(2){
   width: 30px;
   height: 30px;
   position: absolute;
   right: 0;
   top: 0;
 }
 .act-cont .act2-tit .tit-center p{
   padding: 5px 0;
   font-size: 24px;
   line-height: 36px;
   color: #8c8c8c;
 }
 .act-cont .act2-tit .tit-center p:nth-child(1){
   display: flex;
   justify-content: space-between;
 }
 .act-cont .act2-tit .tit-center p:nth-child(1) span{
   font-size: 32px;
   line-height: 36px;
   font-weight: bold;
 }
 .act-cont .act2-tit .tit-center p:nth-child(1) span:nth-child(2){
   width: 80px;
   height: 34px;
   border: 1px solid #723676;
   font-size: 24px;
   line-height: 34px;
   color: #723676;
   text-align: center;
   margin-left: 24px;
 }
 .act-cont .act2-tit img:nth-child(3){
   width: 16px;
   align-self: center;
 }
  .act-cont .act2-duce .introduce{
    margin: 80px 40px 60px;
    height: 70px;
    line-height: 70px;
    color: #fff;
    text-align: center;
    font-size: 32px;
    background: url("../../../assets/img/rhombus.png") no-repeat center/cover;
  }

 .act2-center{
   text-align: center;
   padding-bottom:38px;
 }
 .act2-center img{
   width: 170px;
 }
 .act2-center p:nth-child(2){
   font-size: 32px;
   line-height: 44px;
   margin: 30px 0;
 }
 .act2-center p:nth-child(3){
   font-size: 28px;
   line-height: 44px;
   color: #884ca4;
 }
 .act2-duce .pf{
   text-indent: 32px;
   font-size: 24px;
   line-height: 44px;
   margin-bottom: 50px;
   padding: 0 40px;
 }
  .contact p{
    font-size: 32px;
    padding: 0 40px 30px;
  }
 .contact .duce-fot{
   text-align: center;
   border-bottom: 2px solid #dcdcdc;
   margin-bottom: 40px;
   padding-bottom: 20px;
 }
 .contact .duce-fot img{
   width: 240px;
 }
 .contact .duce-fot p{
   font-size: 24px;
 }
 .act2-photo{
   padding: 0 40px;
   border-bottom: 2px solid #dcdcdc;
   margin-bottom: 40px;
 }
 .act2-photo p{
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
 }
  .act2-photo p span:nth-child(1){
    font-size: 32px;
    font-weight: bolder;
  }
 .act2-photo p span:nth-child(2){
   font-size: 26px;
 }
 .act2-photo p span:nth-child(2) img{
   width: 12px;
   margin-left: 20px;
 }
 .act2-photo ul{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }
 .act2-photo ul li img{
   width: 200px;
   height: 200px;
   margin-bottom: 20px;
   border-radius: 10px;
 }
 .act2-photo .photoul{
   justify-content: flex-start;
 }
 .act2-photo .photoul li{
   margin-right: 30px;
 }
 .act2-photo .photoul li:nth-child(3n+3){
   margin-right: 0;
 }
 .act2-photo .ulfour li .img{
   position: relative;
 }
  .act2-photo .ulfour li .img img:nth-child(1){
    width: 320px;
  }
 .act2-photo .ulfour li .img img:nth-child(2){
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   width: 54px;
   height: 54px;
 }
 .act2-photo .ulfour li p{
   font-size: 28px;
 }
 .act2-active{
   padding: 0 40px;
   border-bottom: 2px solid #dcdcdc;
   margin-bottom: 40px;
 }
  .act2-active>p{
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }
  .act2-active>p span:nth-child(1){
    font-size: 32px;
    font-weight: bolder;
  }
  .act2-active>p span:nth-child(2){
    font-size: 26px;
  }
  .act2-active>p span:nth-child(2) img{
    width: 12px;
    margin-left: 20px;
  }
  .act2-active ul li{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcdcdc;
    margin-bottom: 20px;
  }
 .act2-active ul li:last-child{
   border-bottom: none;
 }
  .act2-active ul li>img{
    width: 90px;
    height: 90px;
    border-radius: 100%;
    background: #bfbfbf;
  }
 .act2-active ul li .act2-right{
   width: 550px;
   margin-left: 20px;
 }
 .act2-active ul li .act2-right p:nth-child(1){
   font-size: 32px;
   margin-bottom: 10px;
 }
 .act2-active ul li .act2-right p:nth-child(2){
   font-size: 24px;
   line-height: 36px;
 }
 .act2-active ul li .act2-right p:nth-child(3){
   display: flex;
   justify-content: space-between;
   padding: 40px 0;
 }
 .act2-active ul li .act2-right p:nth-child(3) span{
   font-size: 24px;
   line-height: 36px;
   color: #8c8c8c;
 }
 .act2-active ul li .act2-right p:nth-child(3) img{
   width: 26px;
   height: 30px;
 }
.act2-vote{
  padding: 0 40px;
  border-bottom: 2px solid #dcdcdc;
  margin-bottom: 40px;
}
 .act2-vote>p{
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
 }
 .act2-vote>p span:nth-child(1){
   font-size: 32px;
   font-weight: bolder;
 }
 .act2-vote>p span:nth-child(2){
   font-size: 26px;
 }
 .act2-vote>p span:nth-child(2) img{
   width: 12px;
   margin-left: 20px;
 }
  .act2-vote .act2-autor{
    font-size: 26px;
    padding-bottom: 40px;
  }
 .act2-vote ul{
   display: flex;
   justify-content: space-between;
   margin-bottom: 30px;
 }
 .act2-vote ul li{
   text-align: center;
 }
 .act2-vote ul li img{
   width: 90px;
   height: 90px;
   border-radius: 100%;
   margin-bottom: 20px;
 }
 .act2-vote ul li p:nth-child(2){
   font-size: 24px;
   color: #8c8c8c;
 }
 .act2-vote .autor-ul{
   flex-wrap: wrap;
 }
 .act2-vote .autor-ul li{
   margin: 20px 20px 0 0;
   width: 150px;
 }
 .act2-vote .autor-ul li:nth-child(4n+4){
   margin-right: 0;
 }
  .act2-vote .autor-ul li img{
    width: 150px;
    height: 112px;
    border-radius: 0;
  }
.tuijian{
  margin-bottom: 0;
  border-bottom: none;
}
  .acti-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    display: flex;
  }
 .acti-footer span{
   height: 100px;
   font-size: 36px;
   line-height: 100px;
   text-align: center;
   color: #fff;
   flex-grow: 1;
 }
 .acti-footer span:nth-child(1){
   background: #e3bd52;
 }
 .acti-footer span:nth-child(2){
   background: #e98345;
 }
 .acti-footer span:nth-child(3){
   background: #884ca4;
 }
 .act2-vote .voteul{
   justify-content: flex-start;
   flex-wrap: wrap;
  }
 .act2-vote .voteul li{
   margin-right: 20px;
 }

 .van-popup{
   width: 100%;
   height: 200px;
   padding: 50px 0;
   display: flex;
   justify-content: space-around;
 }
 .van-popup img{
   width: 100px;
   height: 100px;
 }
 .fotsss{
   text-align: center;
 }
 .fotsss p{
   font-size: 26px;
   padding-top: 10px;
 }
</style>
